<template>
	<div class="echarBottom" id="chart4"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
	type EChartsOption = echarts.EChartsOption;

	var chartDom = document.getElementById("chart4")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		color: ["#80FFA5"],
		tooltip: {
			// 添加tooltip
			trigger: "axis", // 触发类型为坐标轴触发
			axisPointer: {
				// 坐标轴指示器配置项
				type: "line", // 指示器类型为阴影指示器
				label: {
					// 坐标轴指示器的文本标签配置项
					show: false,
				},
				shadowStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "rgba(4, 32, 39, 0.8)" }, // 修改为上面的颜色值
						{ offset: 1, color: "rgba(15, 144, 151, 0.8)" }, // 修改为下面的颜色值
					]),
				},
				lineStyle: {
					color: "#ffbc0f", // 设置高亮颜色为黄色
				},
			},
			backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景颜色
			padding: 10, // 内边距
			textStyle: {
				color: "#ffbc0f", // 文字颜色
				fontSize: 14, // 文字大小
			},
			borderColor: "#ffbc0f",
			formatter: function (params: any) {
				var value = params[0].value;

				var content = '<div class="tooltip-container">';
				content += '<div class="tooltip-value">' + value + "</div>";
				content += "</div>";

				return content;
			},
		},
		toolbox: {},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			top: "5%",
			containLabel: true,
		},
		xAxis: [
			{
				type: "category",
				boundaryGap: false,
				data: [
					"1月",
					"2月",
					"3月",
					"4月",
					"5月",
					"6月",
					"7月",
					"8月",
					"9月",
					"10月",
					"11月",
					"12月",
				],
			},
		],
		yAxis: [
			{
				type: "value",
				splitLine: {
					show: false, // 隐藏 x 轴上的横线
				},
			},
		],
		series: [
			{
				name: "Line 1",
				type: "line",
				stack: "Total",
				smooth: true,
				lineStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 1,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: "#ffbc0f", // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#ffffff", // 100% 处的颜色
							},
						],
					},
					width: 2,
					type: "solid",
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(150, 114, 20, 0.8)",
						},
						{
							offset: 1,
							color: "rgba(41, 36, 20, 0.8)",
						},
					]),
				},
				emphasis: {
					focus: "series",
					itemStyle: {
						color: "#fff", // 设置鼠标悬停时小圆点的颜色为白色
						borderColor: "#fff", // 设置鼠标悬停时小圆点的边框颜色为白色
						borderWidth: 2, // 设置鼠标悬停时小圆点的边框宽度为0，即没有边框
					},
				},
				data: [
					50, 100, 150, 200, 150, 100, 150, 100, 50, 100, 150, 200, 150, 100,
				],
			},
		],
	};

	option && myChart.setOption(option);
});
</script>

<style scoped></style>
